<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加菜单_碳氢知识数据管理平台</title> 
<script src="/static/js/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/*SITE STYLING*/
html{font-family:'Lato', sans-serif;color:white;}
.clear{clear:both;display:block;}
p{color:#000;line-height:50px;}
/* myform */
#myform{width:400px;margin:50px auto 0 auto;position:relative;}
#myform label{margin-bottom:5px;display:block;text-transform:uppercase;font-size:14px;color:#000;font-weight:bold;}
#myform input[type="password"],#myform input[type="text"]{
	background:transparent;border:2px solid #000;
	color:#777;
	font-family:"Lato", sans-serif;
	font-size:14px;
	padding:9px 5px;
	height:21px;
	text-indent:6px;
	-webkit-appearance:none;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	-webkit-transition:border .25s linear, color .25s linear;
	-moz-transition:border .25s linear, color .25s linear;
	-o-transition:border .25s linear, color .25s linear;
	transition:border .25s linear, color .25s linear;
	-webkit-backface-visibility:hidden;
	width:100%;
}
#myform input[type="password"]:focus,#myform input[type="text"]:focus{outline:0;border:2px solid #000;}

.strength_meter{
	position:absolute;
	left:0px;
	top:163px;
	width:100%;
	height:43px;
	z-index:-1;
	border-radius:5px;
}
.button_strength {
	text-decoration:none;
	color:#007bff;
	font-size:13px;
}
.strength_meter div{width:0%;
	height:43px;
	text-align:right;
	color:#000;
	line-height:43px;
	-webkit-transition:all .3s ease-in-out;
	padding-right:12px;
	border-radius:5px;
}
.strength_meter div p{
	position:absolute;
	top:48px;
	right:-11px;
	font-size:13px;
}
div.changeDiv input {
    font-size: 1em;
    font-family: 仿宋, serif;
    width: 60%;
    display: block;
    opacity: 0.8;
    padding: 0.2em;
    color: #000000;
    border-radius: 10px;
    background-color: #bed8df;
}
</style>
</head> 
<body> 
<form id="myform"> 
	<p> <label>选择菜单分类</label>
		<div class="changeDiv">
            <input id="menuClassify" type="text" list="menulist">
            <datalist id="menulist">
            	<option>菜单</option>
            	<option th:each="menu : ${firstMenu}">[[${menu.hmenuName}]]</option>
            </datalist>
		</div>
	</p> 
	<p> <label>输入菜单名称</label> <input type="text" id="menuName" name="" value="" autocomplete="off"> </p> 
	<p> <label>输入菜单地址</label> <input type="text" id="menuUrl" name="" value="" autocomplete="off"> </p> 
	<p> <label>输入菜单序号</label> <input type="text" id="menuOrder" name="" value="" autocomplete="off" readonly="readonly"> </p> 
	<p> <label>菜单是否上线</label>
		<div class="changeDiv">
            <input id="isPopUpOnline" type="text" list="sexlist">
            <datalist id="sexlist">
            	<option>否</option>
            	<option>是</option>
            </datalist>
		</div>
	</p> 
	
	<br>
	<button class="layui-btn layui-btn-normal" lay-submit lay-filter="save" >确定</button>
	<button class="layui-btn layui-btn-primary" id="closeDialog">取消</button>
</form>
<script type="text/javascript">
$(top.hangge());//关闭加载状态
$(function(){
	$("#menuClassify").blur(function (){
		let _hmenu_name = $("#menuClassify").val()+'';
		if(''!=_hmenu_name){
			$.post("/admin/umenu/serialNumber?hmenu_name="+_hmenu_name,function(result){
				if(result==0){
					layer.msg("<span style='color:#000;'>请选择菜单分类</span>", {icon: 5});
				} else {
					$("#menuOrder").val(result);
				}
			});
		}
	});
});


$(document).ready(function($) {
		
	var form ;
	layui.use(['upload','element','form'], function(){
	    form = layui.form;	    
	    form.on('submit(save)', function(data){
	    	var menuClassify = $("#menuClassify").val();
	    	var menuName = $("#menuName").val();
	    	var menuUrl = $("#menuUrl").val();
	    	var menuOrder = $("#menuOrder").val();
	    	var isPopUpOnline = $("#isPopUpOnline").val();
	    	if($.trim(menuClassify)==''){
	    		layer.msg("<span style='color:#000;'>请选择菜单分类</span>", {icon: 5});
	    		return false;
	    	}
	    	if($.trim(menuName)==''){
	    		layer.msg("<span style='color:#000;'>请输入菜单名称</span>", {icon: 5});
	    		return false;
	    	} 
	    	if($.trim(menuUrl)==''){
	    		layer.msg("<span style='color:#000;'>请输入菜单地址</span>", {icon: 5});
	    		return false;
	    	} 
	    	if($.trim(menuOrder)==''){
	    		layer.msg("<span style='color:#000;'>请输入菜单序号</span>", {icon: 5});
	    		return false;
	    	} 
	    	if($.trim(isPopUpOnline)==''){
	    		layer.msg("<span style='color:#000;'>请输入菜单是否上线</span>", {icon: 5});
	    		return false;
	    	} 
	    	var params = {};
			params.menuClassify = menuClassify;
			params.menuName = menuName;
			params.menuUrl = menuUrl;
			params.menuOrder = menuOrder;
			params.isPopUpOnline = isPopUpOnline;
			$.ajax({
			   type: "POST",
			   url: "/admin/umenu/addMenu",
			   data: params,
			   dataType:"json",
			   success: function(result){
				   if(result.code==0){
					   layer.msg("<span style='color:#000;'>"+result.msg+"</span>", {icon: 1});
					   setTimeout(function(){
						   var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
					   },1500);
				   }else{
					   layer.msg("<span style='color:#000;'>"+result.msg+"</span>", {icon: 2});
				   }
			   },
			   error:function(){
				   layer.msg("'<span style='color:#000;'>系统错误，请稍后再试</span>'",{icon: 2});            
			   }
			 }); 
	    	
			return false; 
		});
	    
	});
	//取消
	$("#closeDialog").click(function(){
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);
	});
	
});


</script>   
 </body>
</html>